<template>
  <img class="picShow" :src="imgUrl" alt="" />
  <swiper
    :autoplay="swiper_option.autoplay"
    :loop="swiper_option.loop"
    :speed="swiper_option.speed"
    :pagination="swiper_option.pagination"
    :slides-per-view="5"
  >
    <swiper-slide v-for="(item, index) in list" :key="index">
      <img
        :src="item.pic"
        @mouseover="handleChange(item.id)"
        width="100"
        height="200"
        alt=""
      />
    </swiper-slide>
  </swiper>
</template>
<script>
import { reactive } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import SwiperCore, { Autoplay, Pagination } from 'swiper'
import 'swiper/css'
SwiperCore.use([Autoplay, Pagination])

export default {
  props: {
    list: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      imgUrl: require('@/assets/upload/哆啦A梦.jpg')
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  methods: {
    handleChange(id) {
      this.imgUrl = this.list[id - 1].pic
    }
  },
  setup() {
    const swiper_option = reactive({
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      loop: true,
      speed: 1000,
      Pagination: {
        clickable: true
      }
    })
    return {
      swiper_option
    }
  }
}
</script>
<style>
.picShow {
  width: 96%;
  height: 800px;
  background-color: aqua;
}
</style>
